<template>
    <div>
     <el-table stripe :data="data.tableData" border>
        <el-table-column type="index" label="序列"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column  label="删除">
            <template #default="scope">
                <el-button type="primary" @click="delet(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
     </el-table>
     <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange(pageSize3)"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {reactive} from "vue";
const currentPage3 = ref(5)
const pageSize3 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  pageSize3.value = 200;
}
const data = reactive({
    tableData:[
        {
        name:"张三",
        age:18,
        sex:"男",
        city:"贵阳"
    },
    {
        name:"丽丽",
        age:20,
        sex:"女",
        city:"遵义"
    },
    {
        name:"李四",
        age:22,
        sex:"男",
        city:"毕节"
    },
    {
        name:"张六",
        age:18,
        sex:"男",
        city:"贵阳"
    },
    {
        name:"莎莎",
        age:20,
        sex:"女",
        city:"遵义"
    },
    {
        name:"小美",
        age:22,
        sex:"女",
        city:"毕节"
    }
]
});
function delet(index){
  alert("您确定要删除吗？")
  console.log(index);
  data.tableData.splice(index,1);
}
</script>

<style lang="scss" scoped>

</style>